<template>
  <div class="content-box">
    <topic-item v-for="item in list" :key="item.id" :item="item"></topic-item>
    <van-pagination
      v-model="mapQuery.page"
      :page-count="totalPages"
      @change="changePag"
      mode="simple"
    />
    <back-top></back-top>
  </div>
</template>

<script>
import { getTopicList } from '@/api/topic'
import topicItem from '../topic/topicItem.vue'
export default {
  components: { topicItem },
  name: 'topicBar',
  data () {
    return {
      mapQuery: {
        page: 1,
        size: 10
      },
      list: [],
      totalPages: 0
    }
  },
  created () {
    this.getTopicLists()
  },
  methods: {
    async getTopicLists () {
      const res = await getTopicList(this.mapQuery)
      this.list = res.data.data
      this.totalPages = res.data.totalPages
    },
    changePag (v) {
      this.mapQuery.page = v
      this.getTopicLists()
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .van-pagination__item {
  color: @priceText;
}
/deep/.van-pagination__page-desc {
  display: none;
}
/deep/.van-pagination__item--disabled {
  color: #333;
}
</style>
